<template>
  <div :class="['login-wrapper', ['', 'login-form-right', 'login-form-left'][direction]]" style="display: flex;justify-content: center;">
    <img src="@/assets/home.png" class="img-class" style="z-index: -1;"/>
    <a-form ref="loginForm" :model="form" :rules="rules" layout="vertical" class="login-form ele-bg-white">
      <div class="akeiyn">
        <img class="leftPic" src="@/assets/xiaobeijing2.png" style="width: 992px" />
        <a-card class="body">
          <a-row>
            <a-col :span="24" class="a-title">欢迎登录</a-col>
            <a-col :span="24"><img src="@/assets/hengxian.png" /></a-col>
            <a-col :span="24" class="a-col-0">
              <img src="@/assets/login.png" class="a-img" /><a-input placeholder="请输入账号" type="text" v-model:value="form.account" class="a-input" />
            </a-col>
            <a-col :span="24" class="a-col-1">
              <img src="@/assets/mima.png" class="a-img" /><a-input-password type="password" placeholder="请输入密码" v-model:value="form.password" class="a-input" />
            </a-col>
            <a-col :span="24">
              <a-popover title="" trigger="hover">
                <template #content>
                  <span>忘记密码请联系BMSH管理员</span>
                </template>
                <p style="color:rgb(78 149 255); margin-left: 200px;">忘记密码？</p>
              </a-popover>
            </a-col>
            <a-col :span="24">
              <a-button block type="primary" :loading="loading" @click="doSubmit()" class="a-button" style="border: white">
                {{ loading ? '登录中' : '登录' }}
              </a-button>
            </a-col>
          </a-row>
        </a-card>
      </div>
    </a-form>
    <div style="width:600px;z-index: 3000;position: absolute;bottom: 0;text-align: center;">
    <a target="_blank" href="https://beian.miit.gov.cn/"
         style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
      <img src="@/assets/beian.png" style="float:left;width: 18px" />
      <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">
          备案号：沪ICP备2023034969号-4
        </p></a>
    </div>
  </div>
</template>

<script>
import router from '@/router';
import store from '@/store';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { LoginApi } from '@/api/LoginApi';
import setting from '@/config/setting';
import { SsoUtil } from '@/utils/sso';
import { SysTenantApi } from '@/api/SysTenantApi';

export default defineComponent({
  name: 'login',
  components: {
  },
  //图片验证码的变量
  data() {
    return {
      visible: false,
      srcImage: '',
      cutImage: '',
      locationY: 0,
      isMovable: false,
      startX: 0,
      oldX: 0,
      currX: 0,
      status: 1,
      uuid: ''
    };
  },
  setup() {
    // saas开关和租户列表
    const saasFlag = ref(setting.saasFlag);
    const saasList = ref([]);
    const imageVerify = setting.imageVerify;

    const direction = ref(0);
    const loading = ref(false);
    const form = reactive({
      account: '',
      password: '',
      remember: true,
      tenantCode: null
    });

    // 如果开启了saas，则获取saas的列表
    onMounted(async () => {
      if (saasFlag.value) {
        saasList.value = await SysTenantApi.dropDownList();
      }
    });

    // 表单验证规则
    const rules = {
      account: [{ required: true, message: '请输入账号', type: 'string', trigger: 'blur' }],
      password: [{ required: true, message: '请输入密码', type: 'string', trigger: 'blur' }]
    };
    //原登录逻辑，保留
    const doSubmit = async () => {
      const data = await LoginApi.login(form);
      if (data.success) {
        // 如果没开启单点登录，则直接将token
        if (!setting.ssoFlag) {
          // 清除回车事件
          document.onkeydown = null;
          message.success('登录成功');
          store
            .dispatch('user/setToken', {
              token: data.data.token,
              remember: form.remember
            })
            .then(() => {
              goHome();
            });
        }
        // 如果开启了单点登录，则根据loginCode跳转到单点服务器
        else {
          SsoUtil.activateByLoginCode(data.data.ssoLoginCode);
        }
      } else {
        message.error(data.data.message);
      }
    };

    /* 跳转到首页 */
    const goHome = () => {
      if (router.query && router.query.from) {
        router.push(String(router.query.from));
      } else {
        router.push('/').catch(() => {});
      }
    };

    return {
      saasFlag,
      saasList,
      direction,
      loading,
      form,
      rules,
      doSubmit,
      goHome,
      imageVerify
    };
  },
  mounted() {
    document.onkeydown = () => {
      let _key = window.event.keyCode;
      //!this.clickState是防止用户重复点击回车
      if (_key === 13) {
        this.doSubmit();
      }
    };
  },
  methods: {
    /**
     * 关闭弹窗
     */
    cancel() {
      this.visible = false;
    },
    /**
     * 重新加载图片
     */
    async reLoad() {
      const temp = await LoginApi.getVerifyInfo();
      this.cutImage = temp.data.cutImage;
      this.srcImage = temp.data.srcImage;
      this.locationY = temp.data.locationY;
      this.uuid = temp.data.key;
      this.isMovable = false;
      this.startX = 0;
      this.oldX = 0;
      this.currX = 0;
      this.status = 1;
    },
    /**
     * 显示图片验证码弹窗
     */
    async showModal() {
      const temp = await LoginApi.getVerifyInfo();
      this.visible = true;
      this.cutImage = temp.data.cutImage;
      this.srcImage = temp.data.srcImage;
      this.locationY = temp.data.locationY;
      this.uuid = temp.data.key;
    },
    /**
     * 鼠标移动
     */

    onMoving(e) {
      if (this.status !== 1 || !this.isMovable) {
        return;
      }
      const distance = e.clientX - this.startX;
      let tempX = this.oldX + distance;

      const minX = 0;
      const maxX = 250;
      tempX = tempX < minX ? 0 : tempX > maxX ? maxX : tempX;

      this.currX = tempX;
    },

    /**
     * 鼠标开始滑动
     */
    onMoveStart(e) {
      if (this.status !== 1) {
        return;
      }
      // 记录滑动开始时的绝对坐标x
      this.isMovable = true;
      this.startX = e.clientX;
    },
    /**
     * 鼠标滑动结束
     */
    onMoveEnd() {
      if (this.status !== 1 || !this.isMovable) {
        return;
      }
      // 将旧的固定坐标x更新
      this.isMovable = false;
      this.oldX = pre => pre.currX;
      const pushInfo = this.form;
      pushInfo.verKey = this.uuid;
      pushInfo.verCode = this.currX;

      //doSubmit中的登录失败判断无效（已在request中拦截，故绕过request）
      fetch(process.env.VUE_APP_API_BASE_URL + '/loginApi', {
        method: 'POST',
        body: JSON.stringify(pushInfo),
        headers: {
          'Content-Type': 'application/json'
        }
      })
        .then(res => res.json())
        .then(res => {
          if (res.success) {
            // 如果没开启单点登录，则直接将token
            if (!setting.ssoFlag) {
              // 清除回车事件
              document.onkeydown = null;
              message.success('登录成功');
              store
                .dispatch('user/setToken', {
                  token: res.data.token,
                  remember: this.form.remember
                })
                .then(() => {
                  this.cancel();
                  this.goHome();
                });
            }
            // 如果开启了单点登录，则根据loginCode跳转到单点服务器
            else {
              SsoUtil.activateByLoginCode(res.data.ssoLoginCode);
            }
          } else {
            message.error(res.message);
            this.reLoad();
          }
        });
    }
  }
});
</script>

<style scoped>
.body{
  width: 400px;
  height: 492px;
  padding: 64px 0px 0px;
  position: absolute;
  top: 5px;
  right: 5px;
  text-align: center;
}
.a-title{
  font-size: 23px;
  font-weight: 600;
}
.a-button{
  width: 290px;
  height: 40px;
}
.a-img{
  float: left;
  margin: 5px 5px 0px 30px;
  padding: 0px 10px 0px 0px;
  border-right: 1px solid #eeeded;
}
.a-input{
  width: 250px;
  float: left;
  border: 0px;
}
.a-col-0{
  margin: 40px 0px 0px;
}
.a-col-1{
  margin: 20px 0px 20px;
}
.img-class{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  top: 0px;
  left: 0px;
}
.login-overlay{
  position: fixed;
  left:0;
  top:0;
  z-index: 98;
  width: 100vw;
  height: 100vh;
  background: #000;
  opacity: 0.4;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 背景 */
.login-wrapper {
  padding: 48px 16px 0 16px;
  position: relative;
  box-sizing: border-box;
  /* background-image: url('~@/assets/bg-login.jpg');*/
  /*  background-image: url('~@/assets/bg-login3.jpg');*/
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

.login-wrapper:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: rgba(0, 0, 0, 0.2); */
}

@media screen and (max-width: 1200px){
  /* 当屏幕宽度小于或等于 600px 或 设备是横向显示时，应用此样式 */
  .leftPic{
    display: none;
  }
  .akeiyn{
    position: absolute;
    z-index: -1100;
    bottom: 0px;
    right: -260px;
  }
  /*.login-form {
    width: 92%;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    position: relative;
    z-index: 99;
    padding: 20px;
  }
  .akeiyn{
    position: absolute;
    z-index: -1100;
    bottom: 1000px;
  }*/
}

@media screen and (min-width: 900px) {
  .lsy{
    position: absolute;
    z-index: 2000;
    bottom: 0px;
  }
}


@media screen and (max-width: 12000px){
  /* 当屏幕宽度小于或等于 600px 或 设备是横向显示时，应用此样式 */
  .login-form {
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    position: relative;
    z-index: 99;
  }
}

/* 卡片 */
/*.login-form {*/
/*  margin: 0 auto;*/
/*  box-sizing: border-box;*/
/*  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);*/
/*  border-radius: 2px;*/
/*  position: relative;*/
/*  z-index: 99;*/
/*}*/
.login-form > img{
  position: relative;
}

.login-form-right .login-form {
  margin: 0 15% 0 auto;
}

.login-form-left .login-form {
  margin: 0 auto 0 15%;
}

.login-form h4 {
  padding: 22px 0;
  text-align: center;
}

/* 验证码 */
.login-input-group {
  display: flex;
  align-items: center;
}

/*.login-input-group :deep(.ant-input-affix-wrapper) {
    flex: 1;
  }*/

.login-input-group .login-captcha {
  width: 102px;
  height: 40px;
  margin-left: 10px;
  padding: 0;
}

.login-input-group .login-captcha > img {
  width: 100%;
  height: 100%;
}

/* 第三方登录图标 */
.login-oauth-icon {
  color: #fff;
  padding: 5px;
  margin: 0 12px;
  font-size: 18px;
  border-radius: 50%;
  cursor: pointer;
}

/* 底部版权 */
.login-copyright {
  color: #eee;
  text-align: center;
  padding: 48px 0 22px 0;
  position: relative;
  z-index: 1;
}

.reload-container {
  margin: 20px 0;
}
.reload-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.reload-tips {
  font-size: 14px;
  color: #666;
}
.slider-wrapper {
  position: relative;
  margin: 10px 0;
  width: 300px;
}

.slider-bar {
  padding: 10px;
  font-size: 14px;
  text-align: center;
  color: #999;
  background-color: #ddd;
  overflow: hidden;
}

.slider-button {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  transform: translateY(-50%);
  cursor: pointer;
  background: #fff center/80% 80% no-repeat;
  box-shadow: 0 2px 10px 0 #333;
}

/* 响应式 */
@media screen and (min-height: 640px) {
  .login-wrapper {
    padding-top: 0;
  }

  .login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -230px;
  }

  .login-form-right .login-form,
  .login-form-left .login-form {
    left: auto;
    right: 15%;
    transform: translateX(0);
    margin: -230px auto auto auto;
  }

  .login-form-left .login-form {
    right: auto;
    left: 15%;
  }

  .login-copyright {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .login-form-right .login-form,
  .login-form-left .login-form {
    left: 50%;
    right: auto;
    margin-left: 0;
    margin-right: auto;
    transform: translateX(-50%);
  }
}
.login-form h4 {
  padding: 22px 0 0 0;
  text-align: center;
}
.text{
  position: fixed;
  z-index: 99;
  bottom: 12px;
  left: 40%;
  right: 40%;
  text-align: center;
  color: #6881A0;
}

/deep/.ant-input-affix-wrapper {
  background-color: #E5EEFD;
}
/deep/.ant-input {
  background-color: #E5EEFD;
}


</style>
